import React, { useState, useMemo } from 'react';
import { Button, Space, Table, Tag, Popconfirm, Modal } from 'antd';
import type { TableProps } from 'antd';
import Myform from './myform';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

import { useAppDispatch, useAppSelector } from '../../stores/getStateTs';
import { action_dellist, action_update } from '../../stores/climary';


const App: React.FC = () => {
  let dispatch = useAppDispatch()
  let obj = useAppSelector(store => store.qwe)
  console.log(obj);


  let gxc = useMemo(() => {
    return obj.list.filter(item => {
      return item.collect
    })
  }, [obj.list])

  //对话框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  let [title, setTitle] = useState('')

  let [itemObj, setItemObj] = useState('')

  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(2)
  const [total, setTotal] = useState(obj.newlist.length)


  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: '优惠券名称',
      dataIndex: 'title',
    },
    {
      title: '领取日期',
      dataIndex: 'time',
    },
    {
      title: '发布数量',
      dataIndex: 'number',
    },
    {
      title: '状态',
      dataIndex: 'collect',
      render: (collect) => {
        return <Tag color={collect ? 'blue' : 'error'}>{collect ? '开启' : '关闭'}</Tag>
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => {
            showModal()
            setTitle('编辑')
            setItemObj(record)
          }}>
            编辑
          </Button>
          <Modal
            title={title}
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            footer={null}
          >
            <Myform title={title} showModal={handleCancel} itemObj={itemObj} key={new Date().getTime()} />
          </Modal>
          <Popconfirm
            title="提示"
            description="确认删除吗?"
            onConfirm={() => {
              dispatch(action_dellist(record.id))
            }}
            okText="是"
            cancelText="否"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return <div>
    <Table<DataType> columns={columns} dataSource={gxc} rowKey={'id'} pagination={{
      current, pageSize, total, showSizeChanger: true, showQuickJumper: true, pageSizeOptions: [3,6,9], onChange: ((page, pageSize) => {
        setCurrent(page)
        setPageSize(pageSize)
      })
    }} />;
  </div>
}

export default App;